<template>
	<view class="page_login">
		<!-- 头部logo -->
		<view class="head">
			<view class="head_bg">
				<view class="head_inner_bg">
					<image style="width: 55px;height: 65px;" :src="imgInfo.head" class="head_logo" />
					
				</view>
			</view>
			
		</view>
		
		<!-- form -->
		<form class="form"  @submit="formSubmit">
			<view class="code">
				<input type="number" :value="checkCode" @input="inputCode" name="checkCode"   placeholder="请输入验证码" maxlength="6" />
				<button class="button" style="width:300upx;height:90upx;color: #09BB07;border: #00B26A;" type="primary" plain=""  :class="{active : !disableCodeBtn}" :disabled="disableCodeBtn"   @click="getCode">{{codeBtn.text}}</button>
			</view>
			<view class="input">
				<input :type="pwdType" :value="passwd" name="passwd" @input="inputPwd" placeholder="请输入密码">
				<view class="img" @tap="switchPwd">
					<image class="img_pwd_switch" :src="this.pwdType === 'text'? imgInfo.icon_pwd_selectswitch : imgInfo.icon_pwd_switch " />
				</view>
			</view>
			<!-- 登录提交 -->
			<button class="submit" type="primary" formType="submit">修改密码</button>
		</form>
		<uni-popup  :show="type=='two'" type="middle" ref="popup"  maskClick="false" >
				<form class="form1"  @submit="formSubmit1">
					<!-- 登录form -->
					<view class="login_form">
						<view class="pwd">请输入图片内容</view>
						<image class="img" :src="imagess"  mode="aspectFill"  />
						<text class="text" @click="change">换一张？</text>
						<view class="input">
							<input type="text" name="newpwd" :value="newpwd"   placeholder="请输入内容">
						</view>
					</view>
					<!-- 登录提交 -->
					<button class="submit" type="primary"  formType="submit" >下一步</button>
					<view class="yticon icon-fork badge" @click="togglePopup('')"></view>
				</form>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../common/graceChecker.js");
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			const isUni = typeof(uni) !== 'undefined'
			return {
				PHONE: '',
				checkCode: '',
				VERIFYPWD: '',
				passwd: '',
				pwdType: 'password',
				imgInfo: {
					head: '/static/head.png',
					icon_del: '/static/icon_del.png',
					icon_pwd_switch: '/static/icon_pwd_switch.png',
					icon_pwd_selectswitch: '/static/icon_pwd_selectswitch.png',
				},
				seconds: 60,
				captchaImg: '',
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				},
				imagess:'',
				token:'',
				text:'',
				type:'',
				newpwd:'',//验证码
				phone:''
			};
		},
		onLoad() {
			this.SIGNATURE = uni.getStorageSync("SIGNATURE");
			this.loadData();
			this.type='two'
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			
			this.loadData();
		},
		computed: {
			disableCodeBtn: function (){
				return this.codeBtn.waitingCode ;
			},
			imagesss: function (){
				return this.imagess ;
			} 
		},
		methods: {
			change(){
				this.loadData();
			},
			togglePopup(type){
				this.type = type
			},
			async loadData(){
				this.$http.post('/user/findImage',{
					TOKEN : uni.getStorageSync("userInfo").TOKEN,
					SIGNATURE : this.SIGNATURE,
				}).then((res)=>{
					if (res.statusCode === 200 && res.data.STATE === '0') {  
						this.token = res.data.OBJECT.TOKEN
						this.imagess = 'https://pay.ncwcys.com:8463/midservice/captcha?value='+this.token
						
					}else if(res.data.STATE === "906" || res.data.STATE === "907" || res.data.STATE === "903" || res.data.STATE === "902" || res.data.STATE === "904" || res.data.STATE === "905"){
						//token已经失效  重新登录
						uni.removeStorageSync('userInfo')
						uni.showModal({
							content: '请重新登录',
							success: (res)=>{
								if(res.confirm){
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}else if(res.cancel) {
									uni.reLaunch({
										url:'/pages/public/login1'
									})
								}
							},
						})
					}else{
						uni.showToast({
							title: res.data.MSG,
							icon: "none",
						})
					}
					
				})
				.catch((err)=>{
				    console.log('request fail', err);
				})
			},
			getCode(){
				this.loadData()
				this.togglePopup('two')
			},
			formSubmit(e) {
				// 将下列代码加入到对应的检查位置
				// 定义表单规则
				var rule = [
					{name:"checkCode", checkType : "int", checkRule: "3,5",  errorMsg:"验证码格式不正确"},
					{name:"passwd", checkType : "reg", checkRule: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$",  errorMsg:"密码太过简单"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					// 验证 手机验证码    
					//通过    修改保存用户信息
					this.SIGNATURE = uni.getStorageSync("SIGNATURE");
					this.phone =  uni.getStorageSync('userInfo').USER.PHONE
					//验证通过以后向后台发送请求
					this.$http.post('/user/resetPayPwd',{
						PHONE : this.phone,
						TOKEN : uni.getStorageSync("userInfo").TOKEN,
						SIGNATURE : this.SIGNATURE,
						PWD: e.detail.value.passwd,
						CODE: e.detail.value.checkCode,
					}).then((res)=>{
						//判断返回内容
						if(res.data.STATE === "0" && res.statusCode === 200){
							uni.showToast({
								title: '修改成功',
								icon: "none",
							})
							setTimeout(function () {
								//成功后页面跳转
								uni.switchTab({
									url:'/pages/user/user'
								})
							}, 500);
							
						}else {
							uni.showToast({
								title: res.data.MSG,
								icon: "none",
							})
						}
					})
					.catch((err)=>{
					    console.log('request fail', err);
					})
					
					
					//TODO不通过   提示用户验证码错误
					
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			formSubmit1(e) {
				// 将下列代码加入到对应的检查位置
				// 定义表单规则
				var rule = [
					{name:"newpwd", checkType : "notnull",  errorMsg:"不能为空"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					this.phone =  uni.getStorageSync('userInfo').USER.PHONE
					//验证通过以后向后台发送请求
					this.$http.post('/user/sendResetPayPwdCode',{
						PHONE : this.phone,
						TOKEN : uni.getStorageSync("userInfo").TOKEN,
						SIGNATURE : this.SIGNATURE,
						TOKENP: this.token,
						CODE: e.detail.value.newpwd
					}).then((res)=>{
						console.log("res>>>>",res);
						if (res.statusCode === 200 && res.data.STATE === '0') {  
							console.log("res1111>>>>");
							this.togglePopup('')
							//关闭验证码输入框
							 //$refs.popup.close();
							this.codeBtn.waitingCode = true;
							this.codeBtn.count = this.seconds;
							this.codeBtn.text = '请稍候'+this.codeBtn.count + 's';
							let countdown = setInterval( () => {
								this.codeBtn.count--;
								this.codeBtn.text = '请稍候'+this.codeBtn.count + 's';
								if( this.codeBtn.count < 0 ){
									clearInterval(countdown);
									this.codeBtn.text = '重新发送';
									this.codeBtn.waitingCode = false;
								}
							},1000);
						}else{
							uni.showToast({
								title: res.data.MSG,
								icon: "none",
							})
						}
					})
					.catch((err)=>{
					    console.log('request fail', err);
					})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			delUser() {
				this.PHONE = ''
			},
			switchPwd() {
				this.pwdType = this.pwdType === 'text' ? 'password' : 'text'
			},
			inputPwd(e) {
				this.PWD = e.target.value
			},
			inputPwd2(e) {
				this.VERIFYPWD = e.target.value
			},
			inputCode(e) {
				this.CODE = e.target.value
			},
			modifyPwd() {

			}
		},
		
	}
</script>

<style>
	page {
		height: auto;
		min-height: 100%;
		background-color: #f5f6f8;
	}
</style>

<style lang="scss" scoped>
	$logo-padding: 50upx;
	$form-border-color: rgba(214, 214, 214, 1);

	.page_login {
		padding: 10px;
	}
	.form1{
		background-color: #f5f5f5;
		width: 450upx;
		height: 400upx;
		border-radius: 8%;
		border: 2upx solid #9F9F9F;
		.login_form{
			margin: 20upx;
			padding-left: 30upx;
			padding-right: 30upx;
			.pwd{
				font-size: 35upx;
				font-weight: 900;
				text-align: center;
			}
			.img{
				padding-top: 20upx;
				padding-left: 10upx;
				width: 130upx;
				height: 60upx;
			}
			.text{
				font-size: 35upx;
				padding-bottom: 10upx;
				padding-left: 10upx;
			}
			.input{
				border: 1upx solid #9F9F9F;
				margin: 40upx 0upx 0upx 0upx;
				height: 60upx;
			}
			
		}
		.submit{
			background-color: #E02E24;
			margin-left: 50upx;
			width: 80%;
		}
		.yticon{
			position: absolute;
			top: 30upx;
			left: 400upx;
			color: #EBEDF0;
			background-color: #999999;
			border-radius: 100%;
		}
	}
	
	
	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: $logo-padding;
		padding-bottom: $logo-padding;

		.head_bg {
			border: 1px solid #fbecf1;
			border-radius: 50px;
			width: 100px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;

			.head_inner_bg {
				border-radius: 40px;
				width: 80px;
				height: 80px;
				display: flex;
				background-color: #E02E24;
				align-items: flex-end;
				justify-content: center;
				overflow: hidden;
			}
		}
	}

	.form {
		display: flex;
		padding-left: 40upx;
		padding-right: 40upx;
		// margin: 80upx,0upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		.code {
			padding-left: 10px;
			margin-right: 20px;
			width: 100%;
			height: 110upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			input {
				outline: none;
				font-size: 30upx;
				height: 100upx;
				border: 1px solid $form-border-color;
				border-radius: 5px;
				padding-left: 10px;
				margin-right: 20px;

				&:focus {
					outline: none;
				}
				
			}
		}

		.input {
			font-size: 30upx;
			width: 100%;
			height: 100upx;
			margin: 10px;
			display: flex;
			padding: 3px;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border: 1px solid $form-border-color;
			border-radius: 5px;

			input {
				outline: none;
				margin-left: 10px;
				height: 40px;
				width: 100%;

				&:focus {
					outline: none;
				}
			}

			.img {
				min-width: 40px;
				min-height: 40px;
				margin: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.img_del {
				width: 21px;
				height: 21px;
			}

			.img_pwd_switch {
				width: 28px;
				height: 12px;
			}

		}
	}

	.submit {
		width: 100%;
		outline: none;
		margin-top: 30upx;
		margin-left: 10px;
		color: white;
		background-color:  #E02E24;
		-webkit-tap-highlight-color: rgba(252, 44, 93, 1.0);

		&:active {
			color: #B6B6B6;
			background-color: rgba(252, 44, 93, 0.8);
		}
	}
</style>
